import Taro, {Component} from "@tarojs/taro";
import {View, ScrollView, Image, Text} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime, pageSize, getAvatar, subtime} from '../../utils/common'

import './index.less'
import './my_profit_list.less'
import './my_profit_cash_none.less'
import lawyer_pic from "../../assets/img/icon_16.png";
import noce_record from "../../assets/img/none_cash.png";

interface IHomeProps extends IStoreProps {}
@inject("stores")
@observer
class Company extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    cashType: 1, // 1：收益明细 2：提现明细
    items: [1], // 用户收益/提现明细
    totalCount: 0,
    pageIndex: 1,
    pageSize,
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'查看明细' })
    this.getUserCommisions()
   // this.getUserCashes()
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  // 获取用户收益明细
  getUserCommisions() {
    let { userStore }  = this.props.stores
    let { pageIndex,pageSize } = this.state
    userStore.getUserCommisions({
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({totalCount: toJS(res.totalCount), items: toJS(res.items)})
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items})
        }
      }
    })
  }

  // 获取用户提现明细
  getUserCashes() {
    let { userStore }  = this.props.stores
    let { pageIndex,pageSize } = this.state
    userStore.getUserCashes({
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({totalCount: toJS(res.totalCount), items: toJS(res.items)})
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items})
        }
      }
    })
  }

  changeNav(id:number) {
    this.setState({
      cashType: id,
      totalCount:0,
      items:[]
    }, () => {
      if(id === 1){
        this.getUserCommisions()
      }else {
        this.getUserCashes()
      }
    })
  }

  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        if(this.state.cashType===1){
          this.getUserCommisions()
        }else {
          this.getUserCashes()
        }
      })
    }
  }


render() {
    let { cashType, items } = this.state
  console.log(items)
    return (
      <View className='my-my_profit my-my_profit_cash_none'>
        <ScrollView className='scroll-view-nav' scrollX={ true }>
          <View className={cashType===1 ? 'scroll-item scroll-item-on' : 'scroll-item'} onClick={this.changeNav.bind(this, 1)}>
            收益明细
            <Text className='line' />
          </View>
          <View className={cashType===2 ? 'scroll-item scroll-item-on' : 'scroll-item'} onClick={this.changeNav.bind(this, 2)}>
            提现明细<Text className='line'  />
            <Text className='line' />
          </View>
        </ScrollView>

        {cashType===1&&
          <View>
            {items.length>0&&
              <View>
                 <View className='all-profit' >
                    累计收益： ￥6666666
                 </View>
                {items.map(item => {
                  return(
                    <View className='list-18-item'>
                      <Image src={getAvatar(item.avatar)} className='img' />
                      <View className='r'>
                        <View className='line line1'>
                          <View className='list-title'>{item.name}
                          </View>
                          <View className='list-info'>{subtime(item.creationTime)}</View>
                        </View>
                        <View className='line line2'>
                          <View className='list-title add-cash'>+{item.amount}</View>
                        </View>
                      </View>
                    </View>
                  )
                })}
              </View>
            }
            {
              items.length<=0&&
              <View>
                 <View className='none-info'>
                    <Image className='none-icon' src={noce_record} />
                    <Text className='none-title list-desc'>暂时还没有收益哦~</Text>
                 </View>
              </View>
            }
          </View>
        }
        {cashType===2&&
          <View>
            {items.length>0&&
            <View>
               <View className='all-profit' >
                  累计收益： ￥6666666
               </View>
              {
                items.map(item => {
                  return(
                    <View className='list-18-item'>
                      <Image src={lawyer_pic} className='img'/>
                      <View className='r'>
                        <View className='line line1'>
                          <View className='list-title'>{item.name}
                          </View>
                          <View className='list-info'>{subtime(item.creationTime)}</View>
                        </View>
                        <View className='line line2 line-cash'>
                          <View className='list-title'>-{item.amount}</View>
                          <View className='type cashing'>提现中</View>
                        </View>
                      </View>
                    </View>
                  )
                })
              }

               <View className='list-18-item'>
                  <Image src={lawyer_pic} className='img'/>
                  <View className='r'>
                     <View className='line line1'>
                        <View className='list-title'>罗东
                        </View>
                        <View className='list-info'>2019-12-5 12:12:12</View>
                     </View>
                     <View className='line line2 line-cash'>
                        <View className='list-title'>-50.00</View>
                        <View className='type success'>提现成功</View>
                     </View>
                  </View>
               </View>

               <View className='list-18-item'>
                  <Image src={lawyer_pic} className='img'/>
                  <View className='r'>
                     <View className='line line1'>
                        <View className='list-title'>罗东
                        </View>
                        <View className='list-info'>2019-12-5 12:12:12</View>
                     </View>
                     <View className='line line2 line-cash'>
                        <View className='list-title'>-50.00</View>
                        <View className='type warn'>提箱失败：恶意操作</View>
                     </View>
                  </View>
               </View>
            </View>
            }
            {
              items.length<=0&&
              <View>
                 <View className='none-info'>
                    <Image className='none-icon' src={noce_record} />
                    <Text className='none-title list-desc'>暂时还没有提现记录哦~</Text>
                 </View>
              </View>
            }
          </View>
        }
      </View>
    )
  }
}

export default Company
